














<!doctype html>
<html lang>
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" , user-scalable="no"">
  <title>vueHexo</title>
  <link rel="shortcut icon" href="images/avatar.jpg">
  
    
    
      <link rel="stylesheet" href="/css/bootstrap.min.css">
    
      <link rel="stylesheet" href="/css/font-awesome.min.css">
    
      <link rel="stylesheet" href="/css/atom-one-dark.css">
    
      <link rel="stylesheet" href="/css/jquery.fancybox.css">
    
      <link rel="stylesheet" href="/css/nprogress.min.css">
    
      <link rel="stylesheet" href="/css/valine.css">
    
      <link rel="stylesheet" href="/css/life.css">
    
  

  

  <!-- jQuery first, then Tether, then Bootstrap JS. -->
  
  
  
    <script src="/js/jquery-2.2.4.min.js"></script>
  
    <script src="https://cdn1.lncld.net/static/js/3.1.0/av-min.js"></script>
  
    <script src="/js/jquery.pjax.js"></script>
  
    <script src="/js/nprogress.min.js"></script>
  
    <script src="/js/tether.min.js"></script>
  
    <script src="/js/bootstrap.min.js"></script>
  
    <script src="/js/highlight.min.js"></script>
  
    <script src="/js/highlightjs-line-numbers.min.js"></script>
  
    <script src="/js/jquery.fancybox.js"></script>
  
    <script src="/js/jquery.qrcode.min.js"></script>
  
    <script src="/js/Valine.min.js"></script>
  
  
</head>
<body>
<script>AV.init({appId:'',appKey:''});</script>
<script type="text/javascript">
      var config = {
            ClasS: 'Counter',
            el:'.views',
            elP: '.views-post'
      }
</script>
<div class="container">
    <div class="row blog-box-shadow">
        <!--博客主栏开始-->
        <div class="col-xl-9 col-lg-12 blog-main" id="pjax-box">
            <header class="blog-header">
                <a href="http://yoursite.com" class="blog-header-mobile-title">Hexo</a>
                <a href="javascript:;" class="blog-header-navbar-btn"><i class="fa fa-bars"></i></a>
                <nav class="blog-header-navbar blog-header-fixed">
                    <ul class="blog-navbar-links">
                        
                          <li class="blog-nav-item"><a href="/" class="transition">首页</a></li>
                        
                          <li class="blog-nav-item"><a href="/about/" class="transition">关于</a></li>
                        
                          <li class="blog-nav-item"><a href="/links/" class="transition">链接</a></li>
                        
                        <div class="blog-navbar-right">
                            <form action>
                                <div class="input-group">
                                    <input type="text" class="blog-header-search" placeholder="search...">
                                    <buttn type="submit" class="blog-header-search-btn"><i class="fa fa-search"></i></buttn>
                                </div>
                            </form>
                        </div>
                    </ul>
                </nav>
            </header>
                
<header class="blog-post-page-title">
    <h4>vue</h4>
    <time datetime="2019-05-16T04:18:39.000Z"><i class="fa fa-clock-o"></i>2019-05-16</time>
    
    
    
    
	
    
</header>
<div class="blog-main-post blog-post-page-box">
    <article class="blog-post-block blog-post-page-content">
        <section>
            
                <pre><code class="&lt;/head&gt;">&lt;body&gt;

  &lt;div id=&quot;app&quot;&gt;
    &lt;input type=&quot;text&quot; v-model=&quot;text&quot;&gt;
    {{ text }}
  &lt;/div&gt;

  &lt;script&gt;
    // 观察者
    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      })
    }
    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
            console.log(Dep.target)
          // 添加订阅者 watcher 到主题对象 Dep
          if (Dep.target) dep.addSub(Dep.target);

          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作为发布者发出通知
          dep.notify();
        }
      });
    }
    function nodeToFragment (node, vm) {
      //在内存创建一个空节点 不会更新视图对象
      var flag = document.createDocumentFragment();
      var child;

      while (child = node.firstChild) {
        //执行编译
        compile(child, vm);
        flag.appendChild(child); // 将子节点劫持到文档片段中
      }
      return flag
    }
    function compile (node, vm) {
      var reg = /\{\{(.*)\}\}/;
      // 节点类型为元素
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析属性
        for (var i = 0; i &lt; attr.length; i++) {
          if (attr[i].nodeName == &#39;v-model&#39;) {
            var name = attr[i].nodeValue; // 获取 v-model 绑定的属性名
            node.addEventListener(&#39;input&#39;, function (e) {
              // 给相应的 data 属性赋值，进而触发该属性的 set 方法
              vm[name] = e.target.value;
            });
            // node.value = vm[name]; // 将 data 的值赋给该 node
            node.removeAttribute(&#39;v-model&#39;);
          }
        };
        new Watcher(vm, node, name, &#39;input&#39;);
      }
      // 节点类型为 text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          // node.nodeValue = vm[name];
          new Watcher(vm, node, name, &#39;text&#39;);
        }
      }
    }
    function Watcher (vm, node, name, nodeType) {
      Dep.target = this;
      this.name = name;
      this.node = node;
      this.vm = vm;
      this.nodeType = nodeType;
      this.update();
      Dep.target = null;
    }
    Watcher.prototype = {
      update: function () {
        this.get();
        if (this.nodeType == &#39;text&#39;) {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == &#39;input&#39;) {
          this.node.value = this.value;
        }
      },
      // 获取 data 中的属性值
      get: function () {
        this.value = this.vm[this.name]; // 触发相应属性的 get
      }
    }
    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    }
    // 构造函数
    function Vue (options) {
      // this.usernmae = options.data.username;
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 编译完成后，将 dom 返回到 app 中
      document.getElementById(id).appendChild(dom); 
    }
    var vm = new Vue({
      el: &#39;app&#39;,
      data: {
        text: &#39;hello world&#39;
      }
    })


    setTimeout(function(){
        vm.text = &#39;ww&#39;
    }, 2000)

  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

            
        </section>
        <footer class="blog-post-page-tags">
        
			
		
        </footer>
    </article>
    <article class="blog-post-page-readmore">
    	
    	
		

		
		

        <div style="clear: both;"></div>
    </article>

    <article class="blog-post-block blog-post-page-content">
            <div class="row">
            
                <div class="col-md-4 col-sm-4 post-page-more-btn">
                    <span class="post-comments-btn btn btn-info btn-block" data-toggle="tooltip" data-placement="top" title="本站采用Disqus评论组件，若您没有科学上网可能会无法查看并评论">加载评论</span>
                </div>
            
                <div class="col-md-4 col-sm-4 post-page-more-btn">
                    <span data-toggle="modal" data-target="#post-donate-content">
                        <span id="post-donate-btn" class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="top" title="如果您觉得本文还不错或者对您有帮助，可以考虑打赏一下作者哦">打赏本文</span>
                    </span>
                </div>
                <div class="col-md-4 col-sm-4 post-page-more-btn">
                    <span data-toggle="modal" data-target="#post-qrcode-content">
                        <span><span id="post-qrcode-btn" class="btn btn-success btn-block" data-toggle="tooltip" data-placement="top" title="微信扫描二维码手机端查看本文及分享本文">二维码</span></span>
                    </span>
                </div>
            </div>
        <div class="post-more-function-br"></div>

        <div class="modal fade" id="post-donate-content" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">打赏本文</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row post-donate-content">
                            <div class="col-md-4">
                                <p>支付宝</p>
                                <img class="post-donate-content-img no-lightbox" src="http://dl.weic96.cn/logo.png">
                            </div>
                            <div class="col-md-4">
                                <p>微信</p>
                                <img class="post-donate-content-img no-lightbox" src="http://dl.weic96.cn/logo.png">
                            </div>
                            <div class="col-md-4">
                                <p>财付通</p>
                                <img class="post-donate-content-img no-lightbox" src="http://dl.weic96.cn/logo.png">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="post-qrcode-content" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">文章二维码</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row post-qrcode-content">
                            <span class="post-qrcode-content-canvas"></span>
                            <img class="post-qrcode-content-img no-lightbox" src>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script>
            // post QRcode
            // 中文转码
            function toUtf8(str) {
                var out, i, len, c;
                out = "";
                len = str.length;
                for (i = 0; i < len; i++) {
                    c = str.charCodeAt(i);
                    if ((c >= 0x0001) && (c <= 0x007F)) {
                        out += str.charAt(i);
                    } else if (c > 0x07FF) {
                        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                        out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    } else {
                        out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                        out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
                    }
                }
                return out;
            }
            // 生成
            var qrcode= $('.post-qrcode-content-canvas').qrcode({width: 150,height: 150,text: toUtf8("http://yoursite.com/2019/05/16/vue/")}).hide();
            var canvas=qrcode.find('canvas').get(0);
            $('.post-qrcode-content-img').attr('src',canvas.toDataURL('image/jpg'));
        </script>

        
    </article>
    
</div>

                
            <footer class="blog-footer">
                <p class="blog-footer-left">Copyright ©  2019 <a href="http://yoursite.com">Hexo</a></p>
                <p class="blog-footer-right">Powered by <a href="https://hexo.io" target="_blank">Hexo</a>,Theme <a href="https://note.isweic.com/themes-life/" target="_blank">Life</a></p>
            </footer>
        </div><!--博客主栏结束-->
        <!--博客侧边栏开始-->
        <div class="col-xl-3 blog-sidebar">
            <div class="blog-sidebar-title">
                <a href>Hexo</a>
            </div>
            <div class="blog-sidebar-logo">
                <img src="images/avatar.jpg">
            </div>
            <div class="blog-sidebar-count blog-sidebar-padding">
                <div class="blog-sidebar-count-left">
                    <p class="blog-sidebar-count-p">1</p>
                    <span class="blog-sidebar-count-span">文章</span>
                </div>
                <div class="blog-sidebar-count-right">
                    <p class="blog-sidebar-count-p">0</p>
                    <span class="blog-sidebar-count-span">标签</span>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div class="blog-sidebar-icon blog-sidebar-padding">
                <ul>
                    <li><a href class="icon-github" target="_blank" data-toggle="tooltip" data-placement="top" title="Github"><i class="fa fa-github"></i></a></li>
                    <li><a href class="icon-weibo" target="_blank" data-toggle="tooltip" data-placement="top" title="新浪微博"><i class="fa fa-weibo"></i></a></li>
                    <li><a href class="icon-twitter" target="_blank" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                    <!--<li><a href="" class="icon-facebook" target="_blank" data-toggle="tooltip" data-placement="top" title="FaceBook"><i class="fa fa-facebook"></i></a></li>-->
                    <li><a href="mailto:" class="icon-email" data-toggle="tooltip" data-placement="top" title="E-Mail"><i class="fa fa-envelope"></i></a></li>
                    <li><a href class="icon-rss" data-toggle="tooltip" target="_blank" data-placement="top" title="RSS"><i class="fa fa-rss"></i></a></li>
                </ul>
            </div>
            <div class="blog-sidebar-categories">
                <h4 class="blog-sidebar-h4"><i class="fa fa-folder-open"></i>&nbsp;文章分类</h4>
                <ul class="list-group blog-sidebar-padding">
                  
                </ul>
            </div>
            <div class="blog-sidebar-tags">
                <h4 class="blog-sidebar-h4"><i class="fa fa-tag"></i>&nbsp;标签云</h4>
                <ul class="blog-sidebar-tags-ul blog-sidebar-padding">
                  
                </ul>
            </div>
            <script>
              // 博客侧栏标签云随机色
              var tag_cloud = $('.tag-could');
              tag_cloud.each(function () {
                  var Cnum = 9;
                  var Crand = parseInt(Math.random() * Cnum);
                  $(this).addClass("tag-could" + Crand);
              })
            </script>
            <!--返回顶部按钮-->
            <div class="retop">
                <i class="fa fa-angle-up"></i>
            </div>
        </div><!--博客侧边栏结束-->
    </div>
</div>
<script src="/js/LeanStatistics.min.js"></script>
<script src="/js/Life.js"></script>
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
    otherF();
    LeanStatistics();
    $(document).pjax('a', '#pjax-box', {fragment:'#pjax-box', timeout:8000}).on('pjax:complete', function() {
      $('pre code').each(function(i, block){
        hljs.highlightBlock(block);
      })
      $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
      });
      LeanStatistics();
    }).on('pjax:start', function() { NProgress.start(); }).on('pjax:end',   function() {
      NProgress.done();
      otherF();
    });
</script>
</body>
</html>
